<nz-modal [(nzVisible)]="isVisible" [nzWidth]="modalWidth" (nzOnCancel)="onBack()" [nzStyle]="{'top': '50px'}">
  <div *nzModalTitle>{{ title }}</div>
  <ng-container *nzModalContent>
    <form [formGroup]="salaryForm" (keydown.enter)="$event.preventDefault()">
      <nz-row [nzGutter]="10">
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="employeeName" nzRequired>员工姓名</nz-form-label>
            <nz-form-control [nzErrorTip]="'请选择员工姓名'">
              <nz-input-group nzSearch [nzAddOnAfter]="employeeNameSuffixIconButton">
                <input nz-input formControlName="employeeName" placeholder="请选择员工姓名" readonly />
              </nz-input-group>
              <ng-template #employeeNameSuffixIconButton>
                <button nz-button nzType="primary" nzSearch (click)="findEmployee()"><nz-icon nzType="search" /></button>
              </ng-template>
            </nz-form-control>
          </nz-form-item>
        </nz-col>
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="basicSalary" nzRequired>基本工资</nz-form-label>
            <nz-form-control [nzErrorTip]="'请输入基本工资'">
            <nz-input-number formControlName="basicSalary" [nzMin]="1" [nzMax]="99999999" [nzPrecision]="2" [nzStep]="0.1" />
            </nz-form-control>
          </nz-form-item>
        </nz-col>
      </nz-row>
      <nz-row [nzGutter]="10">
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="performanceSalary">绩效工资</nz-form-label>
            <nz-form-control>
            <nz-input-number formControlName="performanceSalary" [nzMin]="1" [nzMax]="99999999" [nzPrecision]="2" [nzStep]="0.1" />
            </nz-form-control>
          </nz-form-item>
        </nz-col>
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="bonus">奖金</nz-form-label>
            <nz-form-control>
            <nz-input-number formControlName="bonus" [nzMin]="1" [nzMax]="99999999" [nzPrecision]="2" [nzStep]="0.1" />
            </nz-form-control>
          </nz-form-item>
        </nz-col>
      </nz-row>
      <nz-row [nzGutter]="10">
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="allowance">津贴</nz-form-label>
            <nz-form-control>
            <nz-input-number formControlName="allowance" [nzMin]="1" [nzMax]="99999999" [nzPrecision]="2" [nzStep]="0.1" />
            </nz-form-control>
          </nz-form-item>
        </nz-col>
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="overtimePay">加班费</nz-form-label>
            <nz-form-control>
            <nz-input-number formControlName="overtimePay" [nzMin]="1" [nzMax]="99999999" [nzPrecision]="2" [nzStep]="0.1" />
            </nz-form-control>
          </nz-form-item>
        </nz-col>
      </nz-row>
      <nz-row [nzGutter]="10">
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="socialSecurityDeduction" nzRequired>社保扣除</nz-form-label>
            <nz-form-control [nzErrorTip]="'请输入社保扣除'">
            <nz-input-number formControlName="socialSecurityDeduction" [nzMin]="1" [nzMax]="99999999" [nzPrecision]="2" [nzStep]="0.1" />
            </nz-form-control>
          </nz-form-item>
        </nz-col>
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="housingFundDeduction" nzRequired>公积金扣除</nz-form-label>
            <nz-form-control [nzErrorTip]="'请输入公积金扣除'">
            <nz-input-number formControlName="housingFundDeduction" [nzMin]="1" [nzMax]="99999999" [nzPrecision]="2" [nzStep]="0.1" />
            </nz-form-control>
          </nz-form-item>
        </nz-col>
      </nz-row>
      <nz-row [nzGutter]="10">
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="personalIncomeTaxDeduction" nzRequired>个人所得税扣除</nz-form-label>
            <nz-form-control [nzErrorTip]="'请输入个人所得税扣除'">
            <nz-input-number formControlName="personalIncomeTaxDeduction" [nzMin]="1" [nzMax]="99999999" [nzPrecision]="2" [nzStep]="0.1" />
            </nz-form-control>
          </nz-form-item>
        </nz-col>
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="otherDeductions" nzRequired>其他扣除</nz-form-label>
            <nz-form-control [nzErrorTip]="'请输入其他扣除'">
            <nz-input-number formControlName="otherDeductions" [nzMin]="1" [nzMax]="99999999" [nzPrecision]="2" [nzStep]="0.1" />
            </nz-form-control>
          </nz-form-item>
        </nz-col>
      </nz-row>
      <nz-row [nzGutter]="10">
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="grossSalary" nzRequired>应发工资</nz-form-label>
            <nz-form-control [nzErrorTip]="'请输入应发工资'">
            <nz-input-number formControlName="grossSalary" [nzMin]="1" [nzMax]="99999999" [nzPrecision]="2" [nzStep]="0.1" />
            </nz-form-control>
          </nz-form-item>
        </nz-col>
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="netSalary" nzRequired>实发工资</nz-form-label>
            <nz-form-control [nzErrorTip]="'请输入实发工资'">
            <nz-input-number formControlName="netSalary" [nzMin]="1" [nzMax]="99999999" [nzPrecision]="2" [nzStep]="0.1" />
            </nz-form-control>
          </nz-form-item>
        </nz-col>
      </nz-row>
      <nz-row [nzGutter]="10">
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="payDate">发放日期</nz-form-label>
            <nz-form-control >
              <nz-date-picker formControlName="payDate" nzFormat="yyyy-MM-dd"></nz-date-picker>
            </nz-form-control>
          </nz-form-item>
        </nz-col>
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="paymentMethod">支付方式</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="paymentMethod">
                <nz-option nzLabel="银行转账" [nzValue]="10"></nz-option>
                <nz-option nzLabel="现金" [nzValue]="20"></nz-option>
                <nz-option nzLabel="支票" [nzValue]="30"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </nz-col>
      </nz-row>
      <nz-row [nzGutter]="10">
        <nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label [nzSpan]="6" nzFor="bankAccountNumber">银行账号</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="bankAccountNumber" placeholder="请输入银行账号" maxlength="64"/>
            </nz-form-control>
          </nz-form-item>
        </nz-col>
      </nz-row>
    </form>
  </ng-container>
  <div *nzModalFooter>
    <div class="form-button-container">
      <button nz-button nzType="primary" (click)="onSave()" [nzLoading]="saveLoading">保存</button>
      <button nz-button nzType="default" (click)="onReset()" [nzLoading]="saveLoading">重置</button>
      <button nz-button nzType="default" (click)="onBack()">关闭</button>
    </div>
  </div>
</nz-modal>
<employee-selector (employeeSelectedEvent)="handleEmployeeSelectedEvent($event)"></employee-selector>
